<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    // provide: 父子组件跨层可以访问，子组件inject来注入数据，父组件provide(数据)
    /*
        import {provide} from Vue
        provide("data", data)

        import {inject} from Vue
        let injectData = inject("data", null)
    */

    const app = Vue.createApp({
        template: `
      <div><child/></div>
    `,
        setup(){
            const {provide,ref,readonly} = Vue;
            const name = ref('dell')
            provide('name',readonly(name));
            provide('changeName',(value)=>{
                name.value = value
            })
            return {}
        }
    });
    app.component('child',{
        setup() {
            const {ref,onMounted } = Vue;
            const hello = ref(null)
            onMounted(()=>{
                // hello.value.innerText = 'sdsd'
                console.log(hello.value.innerText)
            })
            return {hello}
        },
        template:`
      <div ref="hello">hello world</div>
    `
    })
    const vm = app.mount("#app");
</script>
</body>
</html>